<template>
  <div>
    <div>
      <a-breadcrumb>
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>文章管理</a-breadcrumb-item>
        <a-breadcrumb-item>文章列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="table-op">
      <div>
        <a-button type="primary" @click="router.push({ name: 'BackendBlogCreate' })">
          <template #icon>
            <icon-plus />
          </template>
          <template #default> 创建 </template>
        </a-button>
      </div>
      <div style="margin-left: auto">
        <a-input-search
          v-model="queryReq.keywords"
          @search="BlogList"
          @keyup.enter="BlogList"
          :style="{ width: '320px' }"
          placeholder="请输入文章内容关键字按回车搜索"
          search-button
        />
      </div>
    </div>
    <div>
      <a-table
        :loading="queryLoading"
        :data="data.items"
        column-resizable
        scrollbar
        :bordered="{ cell: true }"
        :scroll="{ x: '130%', y: '100%' }"
      >
        <template #columns>
          <a-table-column title="Id" data-index="id" :width="50" fixed="left"></a-table-column>
          <a-table-column
            title="标题"
            data-index="title"
            ellipsis
            tooltip
            :width="150"
            fixed="left"
          ></a-table-column>
          <a-table-column title="标签" data-index="tags"></a-table-column>
          <a-table-column title="作者" data-index="author"></a-table-column>
          <a-table-column title="概要" ellipsis tooltip :width="400">
            <!-- 自定义渲染 -->
            <template #cell="{ record }">
              {{ record.content.slice(0, 200) }}
            </template>
          </a-table-column>
          <a-table-column
            title="创建时间"
            :width="columns_width.created_at_width"
            data-index="created_at"
          >
            <template #cell="{ record }">
              <!-- 后端返回的是秒的时间辍,前端使用的毫秒需乘以1000 -->
              {{ new Date(record.created_at * 1000).toLocaleString() }}
            </template>
          </a-table-column>
          <a-table-column
            title="状态"
            data-index="status"
            :width="columns_width.status_width"
          ></a-table-column>
          <a-table-column align="center" title="操作" :width="columns_width.op_width" fixed="right">
            <template #cell="{ record }">
              <a-space>
                <!-- 携带文章的ID跳转到创建页面,根据id拉取数据 -->
                <a-button
                  @click="router.push({ name: 'BackendBlogCreate', query: { id: record.id } })"
                  type="primary"
                  size="mini"
                  >修改</a-button
                >
                <a-button
                  @click="$modal.info({ title: 'Name', content: record.title })"
                  type="primary"
                  size="mini"
                  >发布</a-button
                >
                <!-- <a-button
                  @click="
                    $modal.info({
                      closable: true,
                      title: '删除文章',
                      content: `是否真的要删除文章[${record.title}]`,
                      ok: deleteHandler(record)
                    })
                  "
                  type="text"
                  status="danger"
                  :loading="deleteLoading === record.id"
                  size="mini"
                  >删除</a-button
                > -->

                <a-button
                  type="text"
                  status="danger"
                  :loading="deleteLoading === record.id"
                  size="mini"
                  @click="handleClick"
                  >删除</a-button
                >
                <div>
                  <a-modal v-model:visible="visible" @ok="handleOk(record)" @cancel="handleCancel">
                    <template #title> 删除文章 </template>
                    <div style="text-align: center; justify-content: center">
                      是否真的要删除文章[{{ record.title }}]
                    </div>
                  </a-modal>
                </div>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { BLOG_LIST, BLOG_DELETE } from '@/api/blog'
import { Message } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'

// 获取数据过后需要模板已经加载完成,才能更新数据
const data = reactive({ items: [], total: 0 })
const queryReq = reactive({
  keywords: ''
})
const columns_width = {
  id_width: 50,
  title_width: 150,
  content_width: 400,
  created_at_width: 180,
  status_width: 85,
  op_width: 200
}
const BlogList = async () => {
  // 让UI显示为数据加载中
  queryLoading.value = true
  try {
    let resp = await BLOG_LIST(queryReq)
    data.items = resp.items
    data.total = resp.total
  } catch (error) {
    Message.error(`获取博客列表失败:${error}`)
  } finally {
    queryLoading.value = false
  }
}

// 查询后端的Loading状态,是否处于数据加载中
const queryLoading = ref(false)
// 这里需要处理单个按钮的状态,通过id比对,来确认哪个按钮处于loading
const deleteLoading = ref(0)
onMounted(() => {
  BlogList()
})
const router = useRouter()
const visible = ref(false)
const handleClick = () => {
  visible.value = true
}
const handleCancel = () => {
  visible.value = false
}
const handleOk = async (record) => {
  deleteLoading.value = record.id
  try {
    const resp = await BLOG_DELETE(record.id)
    BlogList()
    console.log(resp)
  } catch (error) {
    Message.error(`删除失败:${error}`)
  }
  visible.value = false
}
</script>

<style scoped>
.table-op {
  display: flex;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>
